<template>
  <div class="taskAction-tree">
    <el-table
      ref="treeTable"
      :data="tableData"
      style="width: 100%;"
      height="100%"
      row-key="nodeId"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      highlight-current-row
      :row-style="{cursor: 'pointer'}"
      class="taskActionTable"
      @select="handleSelectionChange"
      @row-click="rowClickFun"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop">
        <template slot-scope="{row}">
          <template v-if="item.prop==='nodeName'">
            <span>{{ row[item.prop] }}</span>
          </template>
          <template v-else>
            <el-switch
              v-model="row[item.prop]"
              active-value="1"
              inactive-value="0"
              size="mini"
              @change="changeFun(row)"
            />
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TreeTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columns: [
        { label: '任务类型', prop: 'nodeName' },
        { label: '是否汇报', prop: 'isReport' },
        { label: '是否申请完成', prop: 'isCompleteApply' },
        { label: '是否申请延期', prop: 'isDelayApply' },
        { label: '是否申请转让', prop: 'isTerminateApply' },
        { label: '是否申请终止', prop: 'isRelayApply' }
      ],
      multipleSelection: []
    }
  },
  methods: {
    changeFun(row) {
      // console.log(row);
      this.$emit('changeFun', row)
    },
    // 点击当前行
    rowClickFun(row) {
      this.$refs.treeTable.clearSelection()
      if (this.multipleSelection.length === 0) {
        this.$refs.treeTable.toggleRowSelection(row, true)
        this.multipleSelection = [row]
      } else {
        const isHave = this.multipleSelection.some(v => v.nodeId === row.nodeId) // 判断是否存在选中的数组里面
        if (isHave) {
          this.$refs.treeTable.toggleRowSelection(row, false)
          this.multipleSelection = []
        } else {
          this.$refs.treeTable.toggleRowSelection(row, true)
          this.multipleSelection = [row]
        }
      }
    },
    // 处理勾选的情况
    handleSelectionChange(val, row) {
      this.$refs.treeTable.clearSelection()
      if (val.length === 0) {
        this.multipleSelection = []
      } else {
        this.$refs.treeTable.toggleRowSelection(row, true)
        this.multipleSelection = [row]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.taskActionTable{
  /deep/.el-table__header{
      .el-checkbox{
        display:none;
      }
    }
}
</style>
